<template>
<div class="login">

     <div class="login-wrapper">
       
      <div class="content">
        <h3>登录</h3>
        <div class="demo-input-suffix">
          <el-input placeholder="请输入账号"  v-model="username"><i slot="prefix" class="el-icon-s-custom"></i></el-input>
        </div>
        <div class="demo-input-suffix">
          <el-input placeholder="请输入密码" type="password" @keyup.enter.native="lllogin" v-model="password"><i slot="prefix" class="el-icon-lock"></i></el-input>
        </div>
         <el-checkbox v-model="checked">记住密码</el-checkbox>
        <el-button type="primary"  @click.native="login" class="submit_btn">登录</el-button>

      </div>
    </div>
</div>
</template>
<script>
import {post} from '../../utils/axios.tool'
export default {
	data() {
    return {
      username:'',
      password:'',
      checked: false
    }
  },
  methods: {
    lllogin(){
      this.login()
    },
    login(){
      let username = this.username
      let password = this.password
      let inneed = 1
      localStorage.setItem('inneed',inneed)
      let url = '/usermanage/login/'
      this.$axios.post(url,{username,password})
      .then( res => {
        localStorage.setItem('sessionId',res.token);
        localStorage.setItem('username',res.username);
        localStorage.setItem('is_superuser',res.is_superuser);
        localStorage.setItem('is_area_manager',res.is_area_manager);
        localStorage.setItem('is_project_manager',res.is_project_manager);
        this.$router.replace({path:"/homepage"})
      })
      .catch( err =>{
        this.$message({
            message: err.msg || '账号或密码错误',
            type: 'warning'
          })
      })
    }
  },
}
</script>
<style lang="less">
.login{
  height: 100%;
  .nav{
      height: 100%;
  }
  .login-wrapper{
    background-color: #ffffff;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    background: url("../../assets/img/login1.jpg") no-repeat;
    background-size: 100% 100%;
    
  }
  
   .content{
    width: 24vw;
    padding-bottom: 5vh;
    color: white;
    position: absolute;
    top: 35%;
    left: 58%;
    background: #0e4180;
    border-radius: 10px;
    opacity: 0.95;
    h3{
        width: 70%;
        padding: 75px 0 26px 0;
        margin: 0 auto;
        font-family: cursive;
        font-weight: normal;
        font-size: 22px;
    }
  }
  .demo-input-suffix{
    width: 70%;
    padding: 0 0 26px 0;
    margin: 0 auto;
  }
  .el-button{
    display: block;
    margin: 0 auto;
    width: 70%;
    color: #ffffff;
    letter-spacing: 1em;
  }
  // .title{
  //   width: 27vw;
  //   height: 6vh;
  //   margin-top: 3vh;
  //   background: url('../../assets/img/login-title.png') no-repeat;
  //   background-size: 100% 100%;
  // }
  .el-input__inner{
      padding-left: 42px!important;
      letter-spacing: 1px!important;
      color: white!important;
      background: #0e4180!important;
      border: 1px solid #106EAE!important;
  } 
  i{
      font-size: 23px;
      line-height: 40px;
      color: #1AB2FE;
      margin: 0 0 0 2px
  }
  .el-checkbox{
      margin: 0 0 25px 15%;
      .el-checkbox__label{
        color: #19B2FF!important;
      }
  }
  .el-checkbox__inner{
    width: 12px;
    height: 12px;
    background: #0e4180;
    border: 1px solid #1AB2FE!important;
  }
}
</style>
